<template>
  <view class="task-item">
    <view class="col-l">
      <TaskIcon :index="iconIndex" />
      <view class="task-info">
        <view class="task-name">
          {{ item?.taskTitle }}<view class="task-score">
            +{{ item?.taskPoint }}
          </view>
        </view>
        <view class="task-desc">
          {{ item?.taskDescription }}
        </view>
      </view>
    </view>
    <view class="col-r" :class="isComplete && 'active'" @click.self="changeStatus">
      {{ isComplete ? '已完成' : '未完成' }}
    </view>
  </view>
</template>

<script lang="ts" setup>
import type { ITodayTask } from '@/api/task'
import { changeTaskStatus, TaskStatus } from '@/api/task'
import TaskIcon from './TaskIcon.vue'

// #region Props
const { item, childId } = defineProps<{ item: ITodayTask, childId: string }>()
// #endregion
// #region Emits
const emits = defineEmits(['changeStatus'])
// #endregion
// #region Hooks
// #endregion
// #region Computed
const isComplete = computed(() => item.status === TaskStatus.Complete)
const iconIndex = computed(() => {
  return mapDiscrete(Number(item.taskId.slice(-2)) / 2)
})
// #endregion
// #region Watch
// #endregion
// #region Event
// #endregion
// #region Function
// #endregion
// #region Life Cycle
function mapDiscrete(x: number) {
  return Math.floor((x * 6) / 10) + 1
}

function changeStatus() {
  if (item.status === TaskStatus.Complete)
    return
  uni.showModal({
    content: `“${item.taskTitle}”已完成？操作后将无法修改`,
    success(res) {
      if (res.confirm) {
        changeTaskStatus({ id: item.taskId, childId }).then(() => {
          emits('changeStatus')
        })
      }
    },
  })
}
// #endregion
// #region Expose
// #endregion
</script>

<style lang="scss" scoped>
.task-item {
  background: var(--card-bg-color);
  border-radius: 12px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-sizing: border-box;
  padding: 0 20px 0 10px;

  .col-l {
    display: flex;
    align-items: center;
  }

  .task-info {
    margin-left: 10px;

    .task-name {
      display: flex;
      align-items: center;
      color: var(--main-light-color);
      font-size: 16px;
      font-weight: 500;

      .task-score {
        margin-left: 10px;
        color: var(--light-color);
      }
    }

    .task-desc {
      font-size: 12px;
      color: rgba(0, 0, 0, 0.5);
    }
  }

  .col-r {
    font-weight: 600;
    color: var(--light-color);
    &.active {
      color: var(--main-light-color);
    }
  }
}
</style>
